<template>
  <div style="margin-left: 100px;">
    <div style="margin-bottom: 15px;" v-for="(item, index) in goodsSpecData.specValue">
      <div style="margin-bottom: 10px;">
        <span>{{ item.specKey }}</span>
        <el-icon @click="closeTag(item.specDetailId, index)">
          <CircleCloseFilled />
        </el-icon>
      </div>
      <div class="flex gap-2">
        <el-tag v-for="tag in item.specValues" :key="tag" closable :disable-transitions="false"
          @close="handleClose(tag, index)">
          {{ tag }}
        </el-tag>
        <el-input v-if="index === inputShow" ref="InputRef" v-model="inputValue" class="w-20" size="small" autofocus
          @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
        <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">
          + 添加
        </el-button>
      </div>
    </div>
    <el-button v-if="formBtnShow" style="margin-bottom: 10px;" type="primary" @click="createNewSpec">
      添加新规格
    </el-button>
    <el-form v-if="formShow" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="规格" prop="specKey" :label-width="formLabelWidth">
        <el-input v-model="formInline.specKey" placeholder="请输入规格" clearable />
      </el-form-item>
      <el-form-item label="规格值" prop="specValue" :label-width="formLabelWidth">
        <el-input v-model="formInline.specValue" placeholder="请输入规格值" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="setSpecDatas">确定</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { saveOrUpdate, getSpecInfo, removeSpecDetail } from '~/api/product/spec'
import { showMessage } from '~/utils/my-notification'

// 父组件传递过来的数据
const specData = defineProps({
  goodsSpecData: Object
})
// 子组件要向父组件传递参数或数据的方法
const emit = defineEmits(['specSetData'])

const specDatas = ref([])
const inputShow = ref('') // tag标签中的input框是否显示
const inputValue = ref('')
const formLabelWidth = '80px'
const formShow = ref(false) // 规格表单是否显示
const formBtnShow = ref(true) // 添加规格按钮是否显示
const tagIndex = ref(0) // 当前点击tag标签的下标
const InputRef = ref()
const formInline = reactive({
  specKey: '',
  specValue: ''
})

// 关闭tag
function closeTag(specDetailId, index) {
  if (specDetailId) {
    ElMessageBox.confirm(`确定执行删除操作,确定将删除数据库中的数据?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false
    }).then(() => {
      removeSpecDetail(specDetailId).then(res => {
        if (res && res.data.code === 200) {
          showMessage('删除成功!')
          specDatas.value.splice(index, 1)
        } else {
          showMessage('删除失败!', 'error')
        }
      }).catch(err => {
        showMessage('删除失败!', 'error')
      })
    }).catch(() => {

    })
  } else {
    specDatas.value.splice(index, 1)
  }
}
function handleClose(tag, index) {
  specData.goodsSpecData.specValue[index].specValues.splice(specData.goodsSpecData.specValue[index].specValues.indexOf(tag), 1)
  emit('specSetData', specData.goodsSpecData)
}
function handleInputConfirm() {
  if (inputValue.value) {
    specData.goodsSpecData.specValue[tagIndex.value].specValues.push(inputValue.value)
    emit('specSetData', specData.goodsSpecData)
  }
  inputShow.value = ''
  inputValue.value = ''
}
// 添加新规格
function createNewSpec() {
  formShow.value = true
  formBtnShow.value = false
}
// 为tag标签赋值
function setSpecDatas() {
  formShow.value = false
  formBtnShow.value = true
  // tagShow.value = true
  specData.goodsSpecData.specValue.push({
    specKey: formInline.specKey,
    specValues: [formInline.specValue]
  })
  // console.log('specData', specData.goodsSpecData)
  formInline.specKey = ''
  formInline.specValue = ''
  emit('specSetData', specData.goodsSpecData)
}
// 取消按钮点击事件
function onCancel() {
  formShow.value = false
  formBtnShow.value = true
  // tagShow.value = false
}
function showInput(index) {
    tagIndex.value = index
    inputShow.value = index
  }

</script>
<style></style>